<template>
	<view class="find">
		<uni-nav-bar left-icon="arrowleft" right-text="清空" title="订单搜索" @clickLeft="back" @clickRight="remove" :fixed="true" class="top" status-bar></uni-nav-bar>
		<view class="condition-list">
			<view class="condition">
				<text>开始时间：</text>
				<picker mode="date" :value="createStartTime" start="2000-01-01" :end="endDate" @change="bindDateChange" class="picker">
					<view class="uni-input" v-show="createStartTime">{{ createStartTime }}</view>
					<view class="uni-placeholder" v-show="!createStartTime">请选择下单开始时间</view>
				</picker>
				<!-- <input v-model="createStartTime" @click="showDateSegmentPicker" class="input" /> -->
				<image src="/static/img/calendar.png" class="calendar" />
			</view>
			<view class="condition">
				<text>结束时间：</text>
				<picker mode="date" :value="createEndTime" start="2000-01-01" :end="endDate" @change="bindDateChange1" class="picker">
					<view class="uni-input" v-show="createEndTime">{{ createEndTime }}</view>
					<view class="uni-placeholder" v-show="!createEndTime">请选择下单结束时间</view>
				</picker>
				<!-- <input v-model="createEndTime" @click="showDateSegmentPicker" class="input" /> -->
				<image src="/static/img/calendar.png" class="calendar" />
			</view>
			<view class="condition">
				<text>手&nbsp;&nbsp;机&nbsp;&nbsp;号：</text>
				<input v-model="contactPhone" :maxlength="11" type="number" class="input" placeholder="请输入手机号"/>
			</view>
			<view class="condition">
				<text>客户名称：</text>
				<input v-model="contactUser"  class="input" placeholder="请输入客户名称" :maxlength="32"/>
			</view>
			<view class="condition">
				<text>订&nbsp;&nbsp;单&nbsp;&nbsp;号：</text>
				<input v-model="orderno" class="input" placeholder="请输入订单号"/>
			</view>
		</view>
		<view class="button" @click="search()">搜 索</view>
	</view>
</template>

<script>
	import { uniNavBar, uniIcons, uniPopup } from '@dcloudio/uni-ui';
const dateSegmentData = [
	{
		is: 'cube-date-picker',
		title: '开始时间',
		min: new Date(new Date().getFullYear() - 1, 0, 1),
		max: new Date()
	},
	{
		is: 'cube-date-picker',
		title: '结束时间',
		min: new Date(new Date().getFullYear() - 1, 0, 1),
		max: new Date()
	}
];

export default {
	components: { uniNavBar},
	data() {
		return {			
			createStartTime: 0,
			createEndTime:0,//默认展示那个标签页
			contactUser:'',//查询类型
			orderno:'',//初始化数据
			contactPhone: '',
			endDate: null
		};
	},
	mounted() {
		this.endDate = this._endDate();
	},
	methods: {
		bindDateChange(e) {
			this.createStartTime = e.target.value;
		},
		bindDateChange1(e) {
			this.createEndTime = e.target.value;
		},
		showDateSegmentPicker() {
			this.dateSegmentPicker.show();
		},
		back() {
			uni.navigateBack({
				delta: 1
			});
		},
		remove() {
			this.createStartTime= null,
			this.createEndTime=null,
			
			this.contactUser='',
			this.contactPhone='',
			this.orderno=''
			
		},
		_endDate() {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();
			return year + '-' + month + '-' + day;
		},
		search(){
			var obj = new Object();
			if(this.createStartTime==0){
				obj.createStartTime=''; 
			}else{
				obj.createStartTime=this.createStartTime; 
			}	
			if(this.createEndTime==0){
				obj.createEndTime=''; 
			}else{
				obj.createEndTime=this.createEndTime; 
			} 
			if(this.createStartTime&&this.createEndTime&&(this.createEndTime<this.createStartTime)){
				uni.showToast({
					title:'结束时间不能小于开始时间',
					icon:'none'
				})
				return;
			}
			obj.contactUser=this.contactUser;
			obj.orderSn=this.orderno;
			obj.contactPhone=this.contactPhone;
			uni.navigateTo({
				url: '/pages/shop/order/searchresult?'+JSON.stringify(obj)
			});
			// uni.setStorage({
			//     key: 'shopordersearchresult',
			//     data: obj,
			//     success: function () {
			       
			//     }
			// });
		}
	}
};
</script>

<style lang="less" scoped>
page {
	background: #ffffff;
}
.find {
	.condition-list {
		padding: 0 20rpx;
		.condition {
			position: relative;
			display: flex;
			line-height: 90rpx;
			margin-top: 40rpx;
			text {
				width: 190rpx;
			}
			.input,.picker {
				flex: 1;
				font-size: 26rpx;
				border-radius: 10rpx;
				border: 1px solid #e1e1e1; /*no*/
				height: 50rpx;
				line-height: 50rpx;
				padding: 20rpx;
				.uni-placeholder {
					color: #999999;
				}
			}
			.calendar {
				position: absolute;
				top: 30rpx;
				right: 20rpx;
				width: 36rpx;
				pointer-events: none;
			}

			image {
				width: 36rpx;
				height: 34rpx;
			}
		}
	}
	.button {
		line-height: 90rpx;
		background: linear-gradient(80deg, #d2158a, #fc6395);
		text-align: center;
		color: #fff;
		border-radius: 45rpx;
		font-size: 32rpx;
		margin: 300rpx 34rpx 67rpx;
		box-shadow: 3rpx 0 20rpx rgba(206, 205, 204, 0.35);
	}
}
</style>
